<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上机练习 1</title>
</head>

<body>
    <h1>引入js文件夹下的dotline.js</h1>
    <script>var Dots = function(speed, alpha) {
        this.canvas;
        this.ctx;
        this.x;
        this.y;
        this.r;
        this.speed = speed && speed > 0 ? speed : 2;
        this.sx;
        this.sy;
        this.a = alpha && alpha > 0 && alpha <= 1 ? alpha : 0.8;
        this.isMouseDot = 0;
    }
    Dots.prototype = {
        init: function(canvas, x, y, isMouseDot) {
            this.canvas = canvas;
            this.x = x || Math.random() * this.canvas.width;
            this.y = y || Math.random() * this.canvas.height;
            this.r = Math.random() * 2;
            if (isMouseDot) this.isMouseDot = 1;
            this.sx = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
            this.sy = isMouseDot ? 0 : Math.random() * this.speed * 2 - this.speed;
            // 
            this.ctx = canvas.getContext("2d");
            this.ctx.beginPath();
            this.ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
            this.ctx.fillStyle = "rgba(175,238,238," + this.a + ")";
            this.ctx.fill();
            this.ctx.closePath();
        },
        update: function() {
            if (this.isMouseDot) return;
            this.x = this.x + this.sx;
            this.y = this.y + this.sy;
            if (this.x < 0 || this.x > this.canvas.width) {
                this.init(this.canvas);
            }
            if (this.y < 0 || this.y > this.canvas.height) {
                this.init(this.canvas);
            }
            this.ctx.beginPath();
            this.ctx.arc(this.x, this.y, this.r + 0.5, 0, 2 * Math.PI);
            this.ctx.fillStyle = "rgba(175,238,238," + this.a + ")";
            this.ctx.fill();
            this.ctx.closePath()
        },
        mouseDot: function(x, y) {
            this.x = x * 2;
            this.y = y * 2;
            this.ctx.beginPath();
            this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            this.ctx.fillStyle = "rgba(175,238,238," + this.a + ")";
            this.ctx.fill();
            this.ctx.closePath();
        }
    }
    
    function start() {
        var canvas = document.createElement("canvas");
        canvas.style.position = "fixed";
        canvas.style.left = "0";
        canvas.style.top = "0";
        canvas.style.zIndex = "-1";
        canvas.style.display = "block";
    
        canvas.width = document.documentElement.clientWidth - 20;
        canvas.height = document.documentElement.clientHeight - 20;
        var body = document.getElementsByTagName("body")[0];
    
        body.appendChild(canvas);
        // canvas
        var dotArr = [],
            dotsNum = 100,
            MaxDotsNum = 200,
            dotDistance = 50,
            overNum = 0;
        for (let i = 0; i < dotsNum; i++) {
            var dot = new Dots(2, 0.9);
            if (i < dotsNum - 1) {
                dot.init(canvas);
            } else {
                dot.init(canvas, 0, 0, 1);
            }
            dotArr.push(dot);
        }
        var clickWithNew = 5;
        document.addEventListener("click", createDot);
    
        function createDot(e) {
            var tx = e.pageX;
            var ty = e.pageY;
            if ((tx > 0 && tx < canvas.width) && (ty > 0 && ty < canvas.height)) {
                for (let i = 0; i < clickWithNew; i++) {
                    var dot = new Dots(1.5, 0.8);
                    dotArr.push(dot);
                    dotsNum++;
                    dot.init(canvas, tx, ty);
                }
            }
        }
    
        canvas.addEventListener("mouseenter", mouseEnterDot)
        canvas.addEventListener("mousemove", mouseMoveDot);
        canvas.addEventListener("mouseleave", mouseLeaveDot);
    
        var dot1 = new Dots(1.5, 0.8)
    
        function mouseEnterDot(e) {
            var tx = e.pageX;
            var ty = e.pageY;
            dot1.init(canvas, tx, ty, 1);
        }
    
        function mouseMoveDot(e) {
            var tx = e.pageX;
            var ty = e.pageY;
            if ((tx > 0 && tx < canvas.width) && (ty > 0 && tx < canvas.height)) {
                dot1.mouseDot(tx, ty);
            }
        }
    
        function mouseLeaveDot(e) {
            dot1.init(canvas);
        }
    
        requestAnimationFrame(animateUpdate);
    
        function animateUpdate() {
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            if (dotsNum > MaxDotsNum) {
                overNum = dotsNum - MaxDotsNum;
            }
            for (let i = overNum; i < dotsNum; i++) {
                if (dotArr[i]) dotArr[i].update();
            }
            for (let i = overNum; i < dotsNum; i++) {
                for (let j = i + 1; j < dotsNum; j++) {
                    var tx = dotArr[i].x - dotArr[j].x;
                    var ty = dotArr[i].y - dotArr[j].y;
                    s = Math.sqrt(Math.pow(tx, 2) + Math.pow(ty, 2));
                    if (s < dotDistance) {
                        ctx.beginPath();
                        ctx.moveTo(dotArr[i].x, dotArr[i].y);
                        ctx.lineTo(dotArr[j].x, dotArr[j].y);
                        ctx.strokeStyle = "rgba(175,238,238," + (dotDistance - s) / dotDistance + ")";
                        ctx.strokeWidth = 1;
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
            }
            requestAnimationFrame(animateUpdate);
        }
    }
    start();</script>
</body>

</html>